<{include file = '../include/header.html'}>

<script src="<{URL}>static/lib/bootstrap-fileinput/js/fileinput.min.js"></script>
<link rel="stylesheet" href="<{URL}>static/lib/bootstrap-fileinput/css/fileinput.min.css">
<script src="<{URL}>static/lib/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="<{URL}>static/lib/bootstrap-fileinput/themes/fa/theme.min.js"></script>

<div class="layout-breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="<{url('index','index')}>">首页</a></li>
		<li class="breadcrumb-item"><a href="<{url('forum','index',$forum.fid,0,1)}>"><{$forum.name}></a></li>
		<li class="breadcrumb-item active">发表主题</li>
	</ol>
</div>
<div class="layout-container">
	<ul class="nav nav-tabs">
		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#edit">编辑</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#preview" id="show">预览</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active mt-3" id="edit">
			<form action="<{url('thread','create_ajax',$forum.fid)}>" method="post" onsubmit="Submit()">
				<div class="input-group mb-3">
					<input type="text" class="form-control" name="title" maxlength="30" placeholder="请输入标题，最多 30 字符" required>
				</div>
				<div class="input-group mb-3">
					<textarea id="editor" class="form-control" name="content" rows="30" maxlength="60000" placeholder="请输入内容，最多 60000 字符，支持 Markdown 语法" required></textarea>
				</div>
				
				<div class="border p-3 mb-3 rounded">
					<h5>
						图片上传
						<button class="btn btn-outline-info btn-sm float-right" onclick="$('#upload').click();" type="button"><i class="fa fa-upload"></i> 上传（<span id="upload-count">0</span> 张）</button>
					</h5>
					<br>
					<div class="file-loading">
						<input id="upload" name="upload" type="file" multiple class="file" data-overwrite-initial="false">
					</div>
					<input type="hidden" name="images" id="images">
				</div>
				<images></images>
				<button type="submit" class="btn btn-primary btn-block">发 表</button>
			</form>
		</div>
		<div class="tab-pane mt-3" id="preview">
			<div class="card-body" id="markdown"></div>
		</div>
	</div>
</div>

<script>
$("#upload").fileinput({
	language: 'zh',
	theme: 'fa',
	uploadUrl: '<{url('index','upload_ajax','thread')}>',
	allowedFileExtensions: ['jpg','png','gif','jpeg','webp'],
	overwriteInitial: false,
	showClose: false,
	showCaption: false,
	showUpload: false,
	showRemove: false,
	maxFileSize: 1024,
	maxFileCount: 10,
	initialPreviewAsData:true,
	enctype: 'multipart/form-data',
	slugCallback: function (filename) {
		return filename.replace('(', '_').replace(']', '_');
	}
}).on('fileuploaded',function(event,data,previewId,index) {
	$('images').attr(previewId,data.response.path);
	$('#upload-count').text(parseInt($('#upload-count').text()) + 1);
}).on('filesuccessremove',function(event,id) {
	$('images').removeAttr(id);
	$('#upload-count').text(parseInt($('#upload-count').text()) - 1);
});
function Submit() {
	$.each($('images')[0].attributes,function() {
		$('#images').val($('#images').val() + ($('#images').val() ? ',' : '') + this.value);
	});
	return false;
};

$('#show').click(function() {
	$('#markdown').html(marked.parse(HuajiBBS.htmlEncode($('#editor').val())));
});
</script>

<{include file = '../include/footer.html'}>